import { Card, Grid } from '@/components/base';
import { Typography } from '@/components/typography';
import { PageController } from '../../page-controller';
import { useObserver } from 'mobx-react-lite';
import { toCurrency } from '@/utils/funs';
import React from 'react';
import styles from './index.module.less';

const { Text } = Typography;

export function Statistics() {
    const pageController = React.useContext(PageController.Context);
    const statistics = useObserver(() => pageController.statistics);

    const statisticItems = [
        { label: '总产品', value: statistics.totalProducts, color: '#1677ff' },
        { label: '有库存', value: statistics.inStockProducts, color: '#52c41a' },
        { label: '库存预警', value: statistics.lowStockProducts, color: '#ff4d4f' },
        { label: '库存价值', value: toCurrency(statistics.totalValue), color: '#722ed1' },
    ];

    return (
        <Card className={styles['statistics']}>
            <Grid columns={2} gap={16}>
                {statisticItems.map((item, index) => (
                    <div key={index} className={styles['statistic-item']}>
                        <Text size={12} type="secondary">{item.label}</Text>
                        <Text size={18} strong style={{ color: item.color }}>
                            {item.value}
                        </Text>
                    </div>
                ))}
            </Grid>
        </Card>
    );
} 